<!-- iPhone metadata -->
<:include file="<:$base_dir_iphone:>/iphone_metadata.tpl":>

<style type="text/css" media="screen">
#jqt.fullscreen #home .info {
	display: none;
}
</style>
<script>
$(function() {
	// initialize scrollable
	$(".type-slider").scrollable({ mousewheel: true });
});

</script>
<div id="jqt">
	<div id="home" class="current">
		<:include file="<:$base_dir_iphone:>/top_toolbar.tpl":>
		<div id="homepanel">
			<div class="type-slider">   
				<div class="items">
				<:section name=type loop=$types step=3:>
				<:$index = $smarty.section.type.index:>
					<div>
						<:if $index lt $typesCount:>
						<a class="slideleft" href="<:$ctx:>/category/?view=<:$currentView:>&back=<:$title:>&type=<:$types[$index].id:>"><img src="<:$domain:><:$imagesPath:><:$typePath:>/<:$types[$index].image:>"/></a>
			        	<:/if:>
			        	<:if $index+1 lt $typesCount:>
						<a class="slideleft" href="<:$ctx:>/category/?view=<:$currentView:>&back=<:$title:>&type=<:$types[$index+1].id:>"><img src="<:$domain:><:$imagesPath:><:$typePath:>/<:$types[$index+1].image:>"/></a>
			        	<:/if:>
			        	<:if $index+2 lt $typesCount:>
						<a class="slideleft" href="<:$ctx:>/category/?view=<:$currentView:>&back=<:$title:>&type=<:$types[$index+2].id:>"><img src="<:$domain:><:$imagesPath:><:$typePath:>/<:$types[$index+2].image:>"/></a>
			        	<:/if:>
			        </div>
				<:/section:>
			   </div>
			</div>
		</div>
		<:include file="<:$base_dir_iphone:>/bottom_tabbar.tpl":>
	</div>
	<input id="currentView" type="hidden" value="<:$currentView:>"/>
	<div id="about" class="selectable">
		<p><img src="<:$ctx:>/images/iphone/stylepad4.png" /></p>
		<p><strong>StylePad</strong><br />Version 1.0 beta<br /><br />by OngSoft<br /><br />
			<a href="http://www.stylepad.com.vn">http://www.stylepad.com.vn</a>
		</p>
		<p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
	</div>
</div>
